

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #083a6d;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active){
  background-color: #083a6d;
}
/*自定义弹出框头部样式*/
.my-header {
  display: flex;
  justify-content: flex-start;
  color: #083a6d;
}

</style>


<template>
    <el-card>
      <!--头部区域 start-->
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon style="margin-right: 10px;"><Avatar /></el-icon>
           报名人员管理
          </h3>

          <!--搜索区域 start-->
          <div class="card-search">
            <el-row :gutter="10">
              <el-col :span="13">
                <el-input :prefix-icon="Search" v-model="searchValue" @keyup.enter.native="search" placeholder="关键字搜索（回车）"/>
              </el-col>

              <el-col :span="8">
                <el-button plain style="width: 100%;" color="#2fa7b9" @click="exportExcelAction">导出 Excel</el-button>
              </el-col>

              <el-col :span="3" style="display: inline-flex;justify-content: center;align-items:center;cursor: pointer;">
                <el-icon style="font-size:20px;color: #b3b6bc;" @click="queryEntryAllFun"><Refresh /></el-icon>
              </el-col>

            </el-row>
          </div>
          <!--搜索区域 end-->
        </div>
      </template>
      <!--头部区域 end-->
      <!--表格区域 start-->
      <div class="table-box">
        <el-table
            stripe
            element-loading-text="数据加载中..."
            v-loading="data.loading"
            :data="data.list.content"
            style="width: 100%;text-align: center;"
            :cell-style="{ textAlign: 'center'}"
            :header-cell-style="{
              fontSize: '15px',
              background: '#083a6d',
              color: 'white',
              textAlign: 'center'
            }">

          <el-table-column label="序号" width="80" type="index" />

          <el-table-column label="审核状态" width="140">
            <template #default="scope">
              <el-tag
                  :type="scope.row.status === '6' ? 'success'
                :(scope.row.status === '2'? 'warning'
                :(scope.row.status === '3'? 'danger': ''))"
                  disable-transitions
              >{{ dictStatus(data.dict3,scope.row.status)}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template #default="scope">
              <span>{{scope.row.realName}}</span>
            </template>
          </el-table-column>


          <el-table-column label="性别" width="120">
            <template #default="scope">
              <el-icon  v-if="dictStatus(data.dict7,scope.row.sex)==='男'" color="#3274d7"><Female/></el-icon>
              <el-icon v-else color="palevioletred"><Male/></el-icon>
            </template>
          </el-table-column>

          <el-table-column label="手机号" width="120">
            <template #default="scope">
              <span>{{scope.row.phone}}</span>
            </template>
          </el-table-column>

          <el-table-column label="身份证号" width="200">
            <template #default="scope">
              <span>{{scope.row.sdCard}}</span>
            </template>
          </el-table-column>

          <el-table-column label="报名课程" width="120">
            <template #default="scope">
              <span>{{dictStatus(data.dict2,scope.row.courseId)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="180">
            <template #default="scope">
              <span>{{scope.row.email}}</span>
            </template>
          </el-table-column>

          <el-table-column label="文化程度" width="120">
            <template #default="scope">
              <span>{{dictStatus(data.dict6,scope.row.culture)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="毕业院校" width="200">
            <template #default="scope">
              <span>{{scope.row.school}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报考专业" width="200">
            <template #default="scope">
              <span>{{scope.row.major}}</span>
            </template>
          </el-table-column>

          <el-table-column label="身份证正面" width="100">
        <template #default="scope">
          <img :src="visitPath+scope.row.beforeIdentityImg" style="width: 64px;height: 40px;">
        </template>
      </el-table-column>

      <el-table-column label="身份证反面" width="100">
        <template #default="scope">
          <img :src="visitPath+scope.row.behindIdentityImg" style="width: 64px;height: 40px;">
        </template>
      </el-table-column>

      <el-table-column label="二寸蓝底证件" width="140">
        <template #default="scope">
          <img :src="visitPath+scope.row.blueImg" style="width: 64px;height: 40px;">
        </template>
      </el-table-column>

      <el-table-column label="学位/毕业证书" width="140">
        <template #default="scope">
          <img :src="visitPath+scope.row.certificateImg" style="width: 64px;height: 40px;">
        </template>
      </el-table-column>


          <el-table-column label="报名时间" width="140">
            <template #default="scope">
              <span>{{formatTime(scope.row.createTime,'yyyy-MM-dd')}}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="250">
            <template #default="scope">
              <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="Delete"
              icon-color="#626AEF" :title="'确定要删除名为“'+scope.row.realName+'”的报名吗？'"
              @confirm="delMember(scope.row.id)">
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>

              <el-button type="primary" size="small" :disabled="scope.row.status==='6'" @click="shengheFun(scope.row,scope.row.status)">审核</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!--表格区域 end-->
      <!--分页插件 start-->
      <el-pagination background layout="total,sizes,prev,pager,next,jumper"
                     :total="data.total"
                     v-model:page-size="data.pageSize"
                     :page-sizes="[10,20,30,40]"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
      />
      <!--分页插件 end-->
      <div v-if="entryDialogShow">
        <entry-dialog :item-info="itemInfo" @receive-entry="receiveEntryFun"></entry-dialog>
      </div>

    </el-card>



    </template>

<script setup lang="ts">
import {ref, reactive, toRefs, onMounted, watch} from 'vue'
    import {formatTime} from "@/utils/date"
    import {exportExcel} from "@/utils/exportExcel";
    import {postDeleteEntry, postQueryEntryAll, postUpdateEntry} from "@/api/edu/entryApi";
    import {Delete, Search} from "@element-plus/icons-vue";
    import search from "@/views/edu/comm/Search.vue";
    import {dictStatus, msg} from "@/config/Tool";
    import {postQueryStatus} from "@/api/edu/dictApi";
    import {visitPath} from "@/api/edu/fileApi";
    import EntryDialog from "@/components/entryDialog.vue";
    // 服务器路径
    const url = import.meta.env.VITE_APP_BASE_API
    const state = ref({
      // 搜索关键字
      searchValue: '',
      // 表格数据
      tableData: [],
      // 总条数
      total: 0,
      // 每页显示行数
      pageSize: 10,
      // 当前页码
      pageIndex: 0,
      // 数据加载状态
      loading: false
    })
    const data = ref({
      list:{content:[]},
      list2:{content:[]},
      sexList:"",
      loading:true,
      dict2:[],
      dict3:[],
      dict4:[],
      dict5:[],
      dict6:[],
      dict7:[],
      // 搜索关键字
      searchValue: '',
      // 总条数
      total: 0,
      // 每页显示行数
      pageSize: 10,
      // 当前页码
      pageIndex: 0,


    })
    const itemInfo =ref({});
    const entryDialogShow = ref(false);
    const searchValue = ref();//搜索



    watch(searchValue,(newValue, oldValue, onCleanup)=>{
      if (newValue.length>=1){
       const arr = data.value.list2.content;
        // @ts-ignore
       let content = []
        arr.map((item:object)=>{
          // @ts-ignore
          if (item.realName.includes(newValue)){

            content.push(item)
            // @ts-ignore
          }else if(item.phone.includes(newValue)){
            content.push(item)
            // @ts-ignore
          }else if(item.sex.includes(newValue)){
            content.push(item)
            // @ts-ignore
          }else if(item.sdCard.includes(newValue)){
           content.push(item)
            // @ts-ignore
          }else if(item.email.includes(newValue)){
            content.push(item)
          }
        })
        // @ts-ignore
        data.value.list.content=content
      }else {
        postQueryEntryAll({
          page:data.value.pageIndex,
          limit:data.value.pageSize
        }).then(res=>{
          if (res.code==200){
            data.value.list=res.data;
            data.value.list2=res.data;
            data.value.total=res.data.totalPages;
            data.value.pageSize = res.data.size;
          }
        })
      }
    })
    onMounted(()=>{
       postQueryStatusFun([2,3,4,5,6,7])
       queryEntryAllFun();
    })

    const handleCurrentChange = (val:number)=> {
      data.value.pageIndex=val-1;
      queryEntryAllFun();
    }
    const handleSizeChange = (val:number)=> {
      data.value.pageSize=val;
      queryEntryAllFun();
    }

    // 删除会员信息
    const delMember = async (id: number)=> {
      postDeleteEntry({id:id}).then((res)=>{
        msg(res,"");
        queryEntryAllFun();
      })
    }
    // 导出列表
    const column = [
      {name: 'id',label: '报名人员ID'},
      {name: 'realName',label: '报名人员姓名'},
      {name: 'email',label: '邮箱'},
      {name: 'phone',label: '手机号'},
    ]
    // 导出会员信息
    const exportExcelAction = ()=> {
      exportExcel({
        column,
        data: data.value.list,
        filename: '会员信息数据',
        format: 'xlsx',
        autowidth: true
      })
    }



    /**
     * 查询用户报名信息
     */
    function queryEntryAllFun(){
      data.value.loading = true;
      postQueryEntryAll({
        page:data.value.pageIndex,
        limit:data.value.pageSize
      }).then(res=>{
        if (res.code==200){
          data.value.list=res.data;
          data.value.list2=res.data;
          data.value.total=res.data.totalPages;
          data.value.pageSize = res.data.size;
        }
        data.value.loading = false;
      })
    }

    /**\
     * 查询字典状态
     */
    function postQueryStatusFun(e:any){
       e.forEach((item:any)=>{
         postQueryStatus({type:item}).then((res)=>{
           switch (item){
             case 2:
                data.value.dict2=res.data;
               break;
             case 3:
               data.value.dict3=res.data;
               break;
             case 4:
               data.value.dict4=res.data;
               break;
             case 5:
               data.value.dict5=res.data;
               break;
             case 6:
               data.value.dict6=res.data;
               break;
             case 7:
               data.value.dict7=res.data;
               break;
             default:
               break;

           }
         })
       })
    }

    /**
     * 销毁组件
     * @param e
     */
    function receiveEntryFun(e:any){
      entryDialogShow.value = false;
      queryEntryAllFun();
    }

    /**
     * 展开组件
     */
    function shengheFun(e:object,status:String){
      if (status==='1'){
        // @ts-ignore
        e.status='2';
        postUpdateEntry(e);
      }
      itemInfo.value = e;
      entryDialogShow.value = true;
    }

</script>


